<!-- edu_11_3_1.html -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="z1"></div>
		
		<div class="z2"></div>
		<div class="z3"></div>
		<div class="line1"></div>
		<div class="line2"></div>
		<div class="line3"></div>
		<style>
			body{
				background-color: lavender;
			}
		.z1{
			width:200px;
			height:200px;
			background-color:plum;
			position:absolute;
			top:200px;
			left:100px;
		}
		.z2{
			width:200px;
			height:100px;
			background-color:aqua;
			position:absolute;
			
			top:100px;
			left:150px;
			transform: skewX(-45deg);
		}
		.z3{
			width:100px;
			height:200px;
			background-color:deeppink;
			position:absolute;
			transform: skewY(-45deg);
			top:150px;
			left:300px;
		}
		.line1{
			border:1px white dashed;
			width:200px;
			position:absolute;
			
			top:299px;
			left:198px;
			
		}
		.line2{
			border:1px white dashed;
			height:200px;
			position:absolute;
			
			top:100px;
			left:199px;
			
		}
		.line3{
			border:1px white dashed;
			width:136px;
			position:absolute;
				transform: rotate(-45deg);
			top:350px;
			left:80px;
			
		}
		
			</style>
	</body>
</html>